<template>
  <div class="anchorNavWarpper">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="navItem"
      :class="classable(item, index)"
      @click="onChange(item, index)"
    >
      <div v-if="index === nowIndex" class="round"></div>
      <span>{{ item.text }}</span>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  name: "com-anchorNav",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    container: {
      type: String,
      default: "#wnAppWarpper"
    }
  },
  data() {
    return {
      nowIndex: 0,
      containerDom: null,
      dewheel: null,
      positions: [],
      areapositions: []
    };
  },
  methods: {
    setNowIndexByTarget(target) {
      let find;
      let index;
      for (let i = 0; i < this.list.length; i++) {
        let item = this.list[i];
        if (item.target === target) {
          find = item;
          index = i;
          break;
        }
      }
      this.onChange(find, index);
    },
    onChange(item, index) {
      this.getPositions();
      const go = () => {
        this.nowIndex = index;
        let toElement = document.querySelector(this.list[index].target);
        toElement.scrollIntoView({
          behavior: "smooth"
        });
      };
      let flag = true;
      if (item.clickable) {
        flag = item.clickable(item, index);
      }
      if (flag) {
        go();
      }
    },
    classable(item, index) {
      let clazz = index === this.nowIndex ? "navItem now" : "navItem";
      if (item.clazz) {
        clazz += " ";
        clazz += item.clazz(item, index);
      }
      if (item.clickable && !item.clickable(item, index)) {
        clazz += " old";
      }

      return clazz;
    },
    getPositions() {
      let last = 0;
      this.positions = this.usedList.map((n, index) => {
        let dom = document.querySelector(n.target);
        let style = document.defaultView.getComputedStyle(dom);
        let marginTop = parseInt(style["marginTop"].replace("px", ""), 10);
        let marginBottom = parseInt(
          style["marginBottom"].replace("px", ""),
          10
        );
        last += dom.offsetHeight + marginTop + marginBottom;
        return last;
      });
      this.areapositions = this.positions.map((n, index) => {
        let r = [];
        if (index === 0) {
          r[0] = 0;
          r[1] = n;
        } else {
          r[0] = this.positions[index - 1];
          r[1] = n;
        }
        return r;
      });
    },
    wheel(e) {
      this.getPositions();
      let scrollTop = this.containerDom.scrollTop;
      let clientHeight = this.containerDom.clientHeight;
      let scrollHeight = this.containerDom.scrollHeight;
      if (scrollTop === 0) {
        this.nowIndex = 0;
      } else if (scrollTop === scrollHeight - clientHeight) {
        this.nowIndex = this.positions.length - 1;
      } else {
        _.forEach(this.areapositions, (item, index) => {
          if (scrollTop >= item[0] && scrollTop <= item[1]) {
            this.nowIndex = index;
            return false;
          }
        });
      }
    }
  },
  computed: {
    usedList() {
      return _.filter(this.list, (item, index) => {
        return !item.clickable || item.clickable(item, index);
      });
    }
  },
  mounted() {
    this.dewheel = _.debounce(this.wheel, 300);
    this.containerDom = document.querySelector(
      this.container + " .el-scrollbar__wrap"
    );
    if (document.addEventListener) {
      this.containerDom.addEventListener("DOMMouseScroll", this.dewheel, false);
      this.containerDom.addEventListener("mousewheel", this.dewheel, false);
    } else {
      this.containerDom.onmousewheel = this.dewheel;
    }
  },
  destroyed() {
    if (document.addEventListener) {
      this.containerDom.removeEventListener(
        "DOMMouseScroll",
        this.dewheel,
        false
      );
      this.containerDom.removeEventListener("mousewheel", this.dewheel, false);
    } else {
      this.containerDom.onmousewheel = null;
    }
  }
};
</script>

<style scoped lang="scss">
.anchorNavWarpper {
  width: 100%;
  margin-left: 20px;
  border-left: 1px solid #dcdfe6;
}

.navItem {
  margin-left: 12px;
  margin-bottom: 16px;
  min-width: 56px;
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #606266;
  position: relative;
  cursor: pointer;

  &:hover {
    color: #1b65b9;
  }

  &.now {
    color: #1b65b9;
  }

  &.old {
    cursor: default;
    color: #c0c4cc;

    &:hover {
      color: #c0c4cc;
    }
  }
}

.round {
  width: 8px;
  height: 8px;
  border-radius: 10px;
  border: 2px solid #1b65b9;
  position: absolute;
  left: -17px;
  top: 5px;
}
</style>
